<template>
  <div>
    <h2>分类</h2>
    <van-row type="flex">
        <van-col span="6">
            <div v-for="item in list" :key="item.id" class="one-snav" @click="updata({'id':item.id,'src':item.banner_url}
            )">
                <p>{{item.name}}</p>
            </div>
        </van-col>
        <van-col span="18" class="two-snav">
            <div class="snav-banner">
                <img :src="src" alt="" class="snav-img">
            </div>
            <div v-for="item in twoList" :key="item.id" class="two-list">
                <img :src="item.wap_banner_url" alt="" class="nav-img" @click="gotopic(item.id)">
                <p>{{item.name}}</p>
            </div>
        </van-col>
    </van-row>
    
    
  </div>
</template>

<script>
import { category,currentaction } from "@/axios";
export default {
  name: "categoryPage",

  data() {
    return {
        active: 0,
        list:[],
        twoList:[],
        id:'',
        src:''
    };
  },
  watch:{
    id(){
        console.log(this.id);
        this.updata({'id':this.id,'src':this.src})
    }
  },
  created() {
   
  },
  async mounted() {
     // 一级导航获取
     let res = await category();
    this.list=res.categoryList
    console.log(res);
    // 二级导航获取
    this.id=this.list[0].id;
    this.src=this.list[0].banner_url;
    this.updata({'id':this.id,'src':this.src}) 
  },
  
  methods: {
    async updata(obj){
        this.id=obj.id;
        this.src=obj.src;
        let res= await currentaction({'id':obj.id});
        this.twoList=res.data.currentOne.subList;
        console.log(this.twoList);
    },
    gotopic(id,name){
        this.$router.push({name:'secCategory',params:{'id':id}})
    }
  },
};
</script>

<style scoped lang="scss">
.two-snav{
    display: flex;
    flex-wrap:wrap;
    .snav-banner{
        width: 75%;
        .snav-img{
            width: 100%;
        }
    }
    .two-list{
        width: 33%;
        .nav-img{
            width: 100%;
        }
    }
}
</style>